<template>
  <!-- Element-ui 内置的图片组件 -->
  <el-image :src="src" class="img-container">
    <!-- 通过插槽自定义错误的展示 -->
    <div slot="error" class="image-slot">
      <img src="./head.jpg">
    </div>
  </el-image>
</template>

<script>
export default {
  name: 'ImageHolder',
  props: {
    src: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped lang="scss">
.img-container {
  border-radius: 50%;

  img {
    width: 100%;
  }
}
</style>
